<template>
	<scroll-view class="jp-scroll-view" :style="scrollHStyle" :class="{'scroll-x':scrollX==true}" :scroll-x="scrollX"
		:scroll-y="scrollY" :scroll-into-view="scrollIntoView">
		<template v-if="scrollX">
			<view class="jp-flex-row" style="display: inline-flex;">
				<slot></slot>
			</view>
		</template>
		<template v-else>
			<view class="jp-flex-column">
				<slot></slot>
			</view>
		</template>
	</scroll-view>
</template>

<script>
	export default {
		name: "jp-scroll-view",
		props: {
			scrollX: {
				type: Boolean, //横向滚动需要设置内容不换行white-space: nowrap;
				default: false,
			},
			scrollY: { //竖向滚动需要给scrollview一个固定高度
				type: Boolean,
				default: false,
			},
			scrollIntoView: {
				type: String
			},
			scrollH: {
				type: String
			}
		},
		computed: {
			scrollHStyle() {
				let style = ''
				if (this.scrollY == true) {
					let scrollH = this.scrollH || '300rpx'
					style = 'height:' + scrollH
				}
				return style
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.jp-scroll-view {
		background-color: white;

		&.scroll-x {
			white-space: nowrap;
		}
	}
</style>